<template>
  <div style="padding-top: 20px">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="按日期查找">
        <el-date-picker v-model="ruleForm.start" type="date" placeholder="日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="按内容查找">
        <el-input placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="danger" @click="myApply">我的申请</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="120"
      />
      <el-table-column
        prop="recruitName"
        label="招聘标题"
        width="120"
      />
      <el-table-column
        prop="applyDepatment"
        label="部门"
        width="120"
      />
      <el-table-column
        prop="recruitPeopleNum"
        label="招聘人数"
        width="120"
      />
      <el-table-column
        label="已报名人数"
        prop="alreadyApplyPeopleNum"
        width="100"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            disable-transitions
          >{{ scope.row.alreadyApplyPeopleNum }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="发布人"
        width="120"
      />
      <el-table-column
        prop="recruitStart"
        label="开始日期"
        width="120"
      />
      <el-table-column
        prop="recruitEnd"
        label="结束日期"
        width="120"
      />
      <el-table-column
        prop="recruitRequirements"
        label="招聘要求"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="apply(scope.row.recruitId,scope.row.recruitName,scope.row.applyDepatment)">申请职位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--申请职位-->
    <el-dialog title="申请职位" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="你的申请" prop="name">
          <el-tag type="success">{{ recruitNameView }}</el-tag>
        </el-form-item>
        <el-form-item label="所属部门" prop="name">
          <el-tag type="success">{{ applyDepatmentView }}</el-tag>
        </el-form-item>
        <el-form-item label="自我介绍" prop="desc">
          <el-input v-model="ruleForm.self" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submit">提交</el-button>
          <el-button size="small" type="danger">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--我的申请-->
    <el-dialog title="我的申请" :visible.sync="MyApplyDialogTableVisible">
      <el-card class="box-card">
        <div class="text item">
          <span>申请状态：</span>
          <el-tag type="danger">{{ myApplyInfo.status }}</el-tag>
        </div>
      </el-card>
      <el-card>
        <div class="text item">
          <span>申请人  ：</span>
          {{ myApplyInfo.userName }}
        </div>
      </el-card>
      <el-card>
        <div class="text item">
          <span>申请时间：</span>
          {{ myApplyInfo.applyTime }}
        </div>
      </el-card>
      <el-card>
        <div class="text item">
          <span>申请部门：</span>
          {{ myApplyInfo.collegeName }}
        </div>
      </el-card>
      <el-card>
        <div class="text item">
          <span>申请来源：</span>
          {{ myApplyInfo.recruitName }}
        </div>
      </el-card>
      <el-card>
        <div class="text item">
          <span>自我介绍：</span>
          {{ myApplyInfo.selfIntroduction }}
        </div>
      </el-card>
    </el-dialog>

  </div>
</template>

<script>
import { getAllRecruitCheckIsOk } from '../../api/Student'
import { saveApply } from '../../api/Student'
import { getApplyByUserId } from '../../api/Student'
export default {
  name: 'CheckPlan',
  data() {
    return {
      dialogTableVisible: false,
      MyApplyDialogTableVisible: false,
      edit: false,
      del: false,
      num: 1, // 招聘人数
      userId: '', // 技术人员账号
      recruitInfo: '',
      recruitIdView: '',
      recruitNameView: '',
      applyDepatmentView: '',
      departmentList: [],
      myApplyInfo: '',
      applyInfo: '',
      page: 1,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],

      ruleForm: {
        recruitId: '',
        title: '',
        status: '',
        num: '',
        start: '',
        end: '',
        department: '',
        requirements: '',
        releaseTime: '',
        userName: '',
        self: ''
      }
    }
  },
  created() {
    this.getAllRecruitCheckIsOk()
    this.getMyApply()
  },

  methods: {
    /**
             * 查询所有招聘计划书
             */
    getAllRecruitCheckIsOk() {
      getAllRecruitCheckIsOk(this.page).then(res => {
        this.tableData = res.data
      })
    },

    /**
             * 填写申请表
             * @param recruitId
             * @param recruitName
             * @param applyDepatment
             */
    apply(recruitId, recruitName, applyDepatment) {
      if (this.applyInfo.errorCode === 30001) { // 代表没有申请
        this.recruitIdView = recruitId
        this.recruitNameView = recruitName
        this.applyDepatmentView = applyDepatment
        this.dialogTableVisible = true
      } else {
        this.$message('对不起,一人只能申请一个职位')
      }
    },

    /**
             * 提交申请书
             */
    submit() {
      saveApply(this.recruitIdView, this.ruleForm.self).then(res => {
        this.$message('申请成功,请等待结果')
        this.getAllRecruitCheckIsOk()
        this.dialogTableVisible = false
      }).catch(err => {
        this.$message.error('申请出现异常' + err)
      })
    },

    /**
             * 学生的申请书信息
             */
    myApply() {
      getApplyByUserId().then(res => {
        if (res.data.errorCode === 30001) {
          this.$message.error('你还没有申请职位')
        } else {
          this.myApplyInfo = res.data
          this.MyApplyDialogTableVisible = true
        }
      })
    },

    /**
             * 加载页面时获取我是否报名了
             */
    getMyApply() {
      getApplyByUserId().then(res => {
        this.applyInfo = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
